@use 'src/components/style/foundation/media-queries' as media;
@use 'src/components/style/foundation/spacing' as spacing;

.Header {
  padding: spacing.spacing(base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  @include media.media(media.$media-query--tablet-up) {
    flex-wrap: nowrap;
  }
}

.Title {
  margin-bottom: spacing.spacing(base);

  @include media.media(media.$media-query--tablet-up) {
    margin-bottom: 0;
  }
}

.Right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row-reverse;
  padding-left: spacing.spacing(tight);
  margin: 0 0 spacing.spacing(base) 0;

  @include media.media(media.$media-query--tablet-up) {
    margin: 0;
    width: auto;
    text-align: right;
    display: block;
  }
}
